<template>
  <div class="coin flex-derc-nowarp flex-jcsb" @click="toTransaction">
    <div class="coinInfo">
      <img :src="coin.img" alt />
      <span>{{coin.name}}</span>
    </div>

    <div class="balanceInfo">
      <span
        class="price"
      >{{convertBigNumber( coin.balance?accDiv(coin.balance,Math.pow(10,coin.decimals)):0)}}</span>
      <span class="rmb">≈￥{{parseFloat(coin.toMoney>0?coin.toMoney:0)}}</span>
    </div>
  </div>
</template>

<script>
import BigNumber from "bignumber.js";
import { mapGetters, mapActions } from "vuex";

export default {
  props: ["coin"],
  data() {
    return {};
  },
  computed: {
    ...mapGetters([
      "wallet",
      "accountIndex",
      "coinsList",
      "currentAccount",
      "messageList",
    ]),
  },
  methods: {
    accMul(arg1, arg2) {
      return this.convertBigNumber(
        new BigNumber(arg1).multipliedBy(arg2).valueOf()
      );
    },
    accDiv(arg1, arg2) {
      return this.convertBigNumber(
        new BigNumber(arg1).dividedBy(arg2).valueOf()
      );
    },
    toTransaction() {
      if (this.coin.name == "ETH") {
        this.currentAccount.currentCoin = this.coin;
        this.$router.push({
          name: "Transaction",
          params: { symbol: this.coin.name, coin: this.coin },
        });
      } else {
        this.currentAccount.currentCoin = this.coin;
        console.log(this.coin);
        this.$router.push({
          name: "TransactionERC",
          params: { symbol: this.coin.name, coin: this.coin },
        });
      }
    },
    convertBigNumber: (param) => {
      let strParam = String(param);
      let flag = /e/.test(strParam);
      if (!flag) return param;

      // 指数符号 true: 正，false: 负
      let sysbol = true;
      if (/e-/.test(strParam)) {
        sysbol = false;
      }
      // 指数
      let index = Number(strParam.match(/\d+$/)[0]);
      // 基数
      let basis = strParam.match(/^[\d\.]+/)[0].replace(/\./, "");

      if (sysbol) {
        return basis.padEnd(index + 1, 0);
      } else {
        return basis.padStart(index + basis.length, 0).replace(/^0/, "0.");
      }
    },
  },
  async mounted() {
    console.log(this.coin);
  },
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}

.coin {
  margin: 0 0.625rem;
  height: 3.75rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 5px 2px rgba(6, 1, 50, 0.04);
  border-radius: 0.1875rem;
  margin-bottom: 0.5625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.coin .coinInfo {
  font-size: 1.4rem;
  color: #4e5e70;
  display: flex;
  align-items: center;
  margin-left: 0.9375rem;
  margin-top: -0.8375rem;
}

.coin .coinInfo img {
  width: 1.625rem;
  margin-right: 0.625rem;
}

.coin .coinInfo span {
  font-size: 17px;
  color: #323232;
  font-weight: bold;
}

.balanceInfo {
  margin-right: 0.625rem;
}

.balanceInfo .price {
  font-size: 15px;
  color: #323232;
  font-weight: bold;
  display: block;
  text-align: right;
}
.balanceInfo .rmb {
  font-size: 13px;
  color: #888;
  display: block;
  text-align: right;
}
</style>

